<template>
  <u-popup v-model="visible" mode="bottom" :border-radius="30">
    <view class="shop-popup-top">
      <text @click="clearAll">清空</text>
      <text>购物详情</text>
      <u-icon name="close" size="30" color="#333" @click="close"></u-icon>
    </view>
    <scroll-view
      scroll-y="true"
      class="all_good_height"
    >
      <view
        class="shop"
        v-for="(item, index) in shopList"
        :key="index"
        @click="changeMenu(item, index)"
      >
        <image class="shop-image" :src="item.img" mode="aspectFit"></image>
        <view class="shop-info">
          <view style="display: flex; align-items: center">
            <image
              v-if="item.datum_activity == '满减'"
              style="width: 40rpx; height: 24rpx; margin-right: 10px"
              src="/static/image/manjian.svg"
            ></image>
            <image
              v-if="item.datum_activity == '满赠'"
              style="width: 40rpx; height: 24rpx; margin-right: 10px"
              src="/static/image/manzeng.svg"
            ></image>
            <span class="title">{{ item.name }}</span>
          </view>
          <view class="shop-info-price">
            {{ item.market_price
            }}<text v-if="item.current_price == 0" style="font-size: 20rpx">
              /{{ item.unit }}</text
            >
            <my-stepper
              class="shop-info-btn"
              :val="+item.num"
              :min="item.minimum"
              :limit="item.designated_inventory"
              :inventory="item.inventory_left"
              :index="index"
              @plus="addAction(item, index, $event)"
              @minus="subAction(item, index, $event)"
            >
            </my-stepper>
          </view>
          <view class="shop-info-tips">
            <view
              class="flex-center"
              v-for="(i, index) in item.datum"
              :key="index"
            >
              {{ i.title }}
            </view>
          </view>
          <view class="flex-middle">
            <span class="shop-info-rise" v-if="item.minimum > 0"
              >起订量 :
              <span style="margin-left: 10rpx">{{ item.minimum }}</span></span
            >
            <span class="shop-info-rise" v-if="item.designated_inventory > 0"
              >库存 :
              <span style="margin-left: 10rpx">{{
                item.inventory_left
              }}</span></span
            >
          </view>
          <span class="remarks">{{ item.describe || "" }}</span>
        </view>
      </view>
    </scroll-view>
    <!-- <my-keyboard @confirm="inputPrice" ref="keyboardRefs"></my-keyboard> -->
  </u-popup>
</template>
<script>
import { $https } from "@/static/js/request.js";
export default {
  name: "IndexShopPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    shopList: {
      type: Array,
      default: () => [],
    },
    supplierId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {};
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("close", val);
      },
    },
  },
  methods: {
    changeMenu(item, index) {
      this.$emit('changeMenu', item)
    },
    addAction(item, index, $event) {
      var min = Number($event.min),
        limit = Number($event.limit),
        inventory = Number($event.inventory),
        val = Number(item.num);
      if (val < min) {
        val = min;
      } else if (limit > 0 && val >= inventory) {
        //不能超过库存量
        val = inventory;
        uni.showToast({
          icon: "none",
          title: "库存不足",
        });
      } else {
        val++;
        const data = {
          goods_id: item.goods_id,
          num: val,
          sign: item.sign,
          spu_id: item.spu_id,
          timeStamp: $event.timeStamp,
        };
        this.postchangeCart(data, index);
      }
    },
    // 点击减号
    subAction(item, index, $event) {
      var min = Number(item.minimum),
        inventory = Number(item.inventory),
        val = Number(item.num),
        enough = false;
      if (val - 1 < min) {
        val = 0;
      }else {
        val--
      }
      if (val <= inventory) {
        enough = true;
      }
      const data = {
        goods_id: item.goods_id,
        num: val,
        sign: item.sign,
        spu_id: item.spu_id,
        // timeStamp: $event.timeStamp,
      };
      this.postchangeCart(data, index, enough);
    },
    // 点击数字
    inputPrice(data) {
      // value: this.value,(数量)
      // index: this.index,(下标)
      // inventory: this.max,(库存)
      var enough = false;
      var val = Number(data.value).toFixed(0);
      //在购物车里超过库存后，数量减到库存之下，库存不足标识应去掉
      if (val <= data.inventory) {
        enough = true;
      }
      this.tag = val;
      var sult = {
        goods_id: this.shopList[data.index].goods_id,
        spu_id: this.shopList[data.index].spu_id,
        num: val,
      };
      this.postchangeCart(sult, data.index, enough);
      this.$refs.tabar.changetag(this.tag);
      if (val == 0) {
        this.shopList.splice(data.index, 1);
        this.getShopInfo();
      }
    },
    //  加减购物车数据
    postchangeCart(options, index = 1, enough = false) {
      $https(
        "POST",
        `changeCart?company_id=${this.supplierId}`,
        options,
        (res) => {
          if (res.data.errcode == 0) {
            //成功后修改数量
            this.$emit('changeGoods', index, options, res.data.data.all_cart_num)
            //修改库存不足状态
            if (enough) {
              this.$emit('changeEnough', 1)
            }
            // if (res.data.data.mjmz_content) {
            //   this.mjmz_content = res.data.data.mjmz_content;
            // }
            // this.goodlist[index].is_origin_price = res.data.data.tm_content ? 1 : 0
          } else if (res.data.errcode == 50009) {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          } else if (res.data.errcode == -1) {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        }
      );
    },
    //  关闭
    close() {
      this.$emit("close", false);
    },
    clearAll() {
      $https(
        "GET",
        `delCart?company_id=${this.supplierId}`,
        {},
        (result) => {
          if (result.data.errcode == 0) {
            this.$emit("clearAll");
          }
        }
      );
      // uni.showModal({
      //   content: "是否清空购物车",
      //   confirmColor: "#4FA388",
      //   success: (res) => {
      //     if (res.confirm) {
      //     } else if (res.cancel) {
      //       console.log("用户点击取消");
      //     }
      //   },
      // });
    }

  },
};
</script>
<style lang="scss" scoped>
::v-deep.u-drawer {
  bottom: 100rpx;
}
.all_good_height {
  max-height: 600rpx;
}
.shop-popup-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32rpx 30rpx 0;
  border-bottom: 1px solid #F5F5F5;
  padding-bottom: 20rpx;
  text {
    &:nth-child(1) {
      color: #666666;
      font-size: 26rpx;
    }
    &:nth-child(2) {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }
  }
}
.shop {
  width: 100%;
  display: flex;
  align-items: center;
  .shop-image {
    width: 180rpx;
    height: 180rpx;
    margin: 0 10rpx;
  }
  .shop-info {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-bottom: 1rpx solid #ebebeb;
    position: relative;
    padding: 32rpx 24rpx 0;
    box-sizing: border-box;
    .title {
      width: 300rpx;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      height: 28rpx;
      line-height: 28rpx;
      color: #333333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 1;
    }
    .remarks {
      width: 300rpx;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 22rpx;
      height: 22rpx;
      line-height: 22rpx;
      color: #cccccc;
      margin-top: 8rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 1;
    }
    .shop-info-tips {
      display: flex;
      flex-direction: row;
      width: 164rpx;
      overflow: hidden;
      .flex-center {
        border: 1rpx solid;
        margin-right: 10rpx;
        border-radius: 4rpx;
        box-sizing: border-box;
        font-size: 18rpx;
        min-width: 48rpx;
        &:first-child {
          color: #f55726;
        }
        &:nth-child(2) {
          color: #40ae36;
        }
      }
    }
    .shop-info-rise {
      margin-top: 8rpx;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 22rpx;
      height: 22rpx;
      line-height: 22rpx;
      color: #cccccc;
      margin-right: 10rpx;
    }
    .shop-info-price {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #f55726;
      display: flex;
      align-items: center;
      position: relative;
      height: 48rpx;
      line-height: 48rpx;
      margin: 16rpx 0 8rpx;
      .icon {
        font-size: 18rpx;
      }
    }
    .shop-info-btn {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>